<template>
  <div class="">
    <el-dialog title="承销商违约" :visible.sync="dialogBoole" width="780px">
      <el-form :model="form" label-width="125px" ref="form" :rules="rules" class="demo-form-inline">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="header-card">
            <span class="header-card-title">违约信息</span>
          </div>
          <el-form-item label="是否有违约金:" prop="isDefaultPenalty">
            <el-radio-group v-model="form.isDefaultPenalty">
              <el-radio label="0">有</el-radio>
              <el-radio label="1">无</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.isDefaultPenalty === '0'" label="违约金(元):" prop="defaultPenalty">
            <el-input v-model="form.defaultPenalty" v-thousand @change="handleDefaultPenalty"/>
          </el-form-item>
          <el-form-item label="违约金付款方式:" v-if="form.isDefaultPenalty === '0'" prop="paymentMethod">
            <el-radio-group v-model="form.paymentMethod">
<!--              <el-radio v-if="Number(disposalStatus) >= 9" label="0">已付金额抵扣</el-radio>-->
              <el-radio label="1">单独支付</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="附件:" prop="attachment">
            <image-common v-model="form.attachment" :limit="5" :disabled="false" :upType="2"/>
          </el-form-item>
          <el-form-item label="说明:" prop="specification">
            <el-input type="textarea" v-model="form.specification" placeholder="请输入说明"
                      :rows="6" maxlength="500" show-word-limit/>
          </el-form-item>
        </el-card>

        <el-card v-if="Number(disposalStatus) > 7" class="box-card" shadow="never" style="margin-top: 16px">
          <div slot="header" class="header-card" style="display: flex;justify-content: space-between">
            <span class="header-card-title">承销商收款账户</span>
            <el-switch v-model="form.configStatus" active-value="1" inactive-value="2"
                       :active-text="activeText" :inactive-text="inactiveText" class="switchStyle"
                       :active-color="activeColor" :inactive-color="inactiveColor"/>
          </div>

          <el-form-item label="收款账号:" prop="underwriterBankAccount"
                        :rules=" {required: form.configStatus === '1', message: '请输入收款账号', trigger: 'blur'}">
            <el-select v-model="form.underwriterBankAccount" @change="handleChange" placeholder="请选择收款账号"
                       style="width: 100%">
              <el-option v-for="item in options"
                         :key="item.accountNumber" :label="item.accountNumber" :value="item.accountNumber"/>
            </el-select>
          </el-form-item>
          <el-form-item label="开户名称:" prop="underwriterBankName">
            <el-input disabled v-model="form.underwriterBankName  "/>
          </el-form-item>
          <el-form-item label="开户银行:" prop="underwriterBank">
            <el-input disabled v-model="form.underwriterBank"/>
          </el-form-item>

        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {underwriterDefault, queryBySupplierId} from "@/api/vehicleDisposal/routineHandle.js"

export default {
  name: 'underwriterDefault',//承销商违约
  computed: {},
  watch: {},
  data() {
    return {
      form: {
        isDefaultPenalty: '有',
        defaultPenalty: '',
        paymentMethod: '1',
        attachment: '',
        specification: '',
        underwriterBankAccount: '',
        underwriterBankName: '',
        underwriterBank: '',
        vehicleDisposalId: null,
        vehicleDisposalNo: null,
        configStatus: '1',
        underwriterId: '',
        bankCode:''
      },
      dialogBoole: false,
      activeColor: '#1890FF',
      inactiveColor: '#CDCDCD',
      activeText: "启用",
      inactiveText: "禁用",
      rules: {
        isDefaultPenalty: [
          {required: true, message: '请选择是否有违约金', trigger: 'change'}
        ],
        defaultPenalty: [
          {required: true, message: '请输入违约金', trigger: 'blur'}
        ],
        paymentMethod: [
          {required: true, message: '请选择违约金付款方式', trigger: 'change'}
        ],
        attachment: [
          {required: true, message: '请上传附件', trigger: 'change'}
        ],
      },
      options: [],
      disposalStatus: null,
      finalPrice: 0,
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleOpen(row) {
      this.dialogBoole = true
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.handleSelectList(row.underwriterId)
      this.form.vehicleDisposalId = row.vehicleDisposalId
      this.form.vehicleDisposalNo = row.vehicleDisposalNo
      this.form.underwriterId = row.underwriterId
      this.disposalStatus = row.disposalStatus
      this.finalPrice = row.finalPrice
      // if (row.disposalStatus >= 9) {
      //   this.form.paymentMethod = '0'
      //   this.$forceUpdate()
      // } else {
      //   this.form.paymentMethod = '1'
      //   this.$forceUpdate()
      // }
    },

    handleSelectList(id) {
      if(!id) return
      queryBySupplierId({supplierId: id}).then(res => {
        if (res.code === 200) {
          this.options = res.data || []
        }
      })
    },

    handleDefaultPenalty(val) {
      if (val) {
        this.form.defaultPenalty = this.validateInput(val)
      }
    },

    validateInput(val) {
      let num;
      const msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (!msg.test(val)) {
        return 0.01;
      } else {
        num = Number(val.toString().match(/^\d+(?:\.\d{0,2})?/)[0]);
        if (num < 0.01) {
          return 0.01;
        } else if (num > this.finalPrice) {
          return this.finalPrice
        } else if (num > 999999999.99) {
          return 999999999.99
        }
      }
      return num;
    },

    handleChange(val) {
      let index = this.options.findIndex(item => item.accountNumber === val)
      if (index !== -1) {
        this.form.underwriterBankName = this.options[index].accountName
        this.form.underwriterBank = this.options[index].bankName
        this.form.bankCode = this.options[index].bankCode
      }
    },

    handleCancel() {
      this.form = {
        isDefaultPenalty: '',
        defaultPenalty: '',
        paymentMethod: '',
        attachment: '',
        specification: '',
        underwriterBankAccount: '',
        underwriterBankName: '',
        underwriterBank: '',
        vehicleDisposalId: null,
        vehicleDisposalNo: null
      }
      this.$refs.form.resetFields();
      this.dialogBoole = false
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          underwriterDefault(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.dialogBoole = false
              this.$emit('refresh')
            }
          })
        }
      });
    }

  },
};
</script>

<style scoped lang="scss">

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #ffffff;
  font-size: 14px;
}

.el-switch__core {
  background-color: rgba(166, 166, 166, 1);
}

.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 22px;
}

.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -2px;
}

.switchStyle .el-switch__label.is-active {
  display: block;
}

.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}

::v-deep .el-switch__label.el-switch__label--right.is-active span {
  color: #FFFFFF !important;
}
</style>

